<template>
  <!--新增/编辑联系人-->
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    title="新增联系人"
    :beforeClose="handleClose3"
    :visible.sync="dialogVisible3"
    width="600px">
    <el-form :model="contactForm" size="mini" label-width="120px" :rules="rules3" ref="contactForm">
      <el-form-item label="客户名称：">
        <el-input v-model="contactForm.customerName"  disabled style="width:300px;"></el-input>
      </el-form-item>
      <!-- <el-form-item label="产品线：" prop="goodsLineId" v-if="popType != 'hasCglid'">
        <el-select v-model="contactForm.goodsLineId">
          <el-option :label="item.goodsLineName" v-for="item in goodsLineList" :value="item.goodsLineId" :key="item.goodsLineId"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="联系人姓名：" prop="contactName">
        <el-input v-model="contactForm.contactName" style="width:150px" ></el-input>
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="contactForm.contactMobile" style="width:150px" @blur="seachRepeat"></el-input>
      </el-form-item>
      <el-form-item label="电话：">
        <el-input v-model="contactForm.contactPhone" style="width:150px" ></el-input>
      </el-form-item>
      <!-- 新增字段 -->
      <el-form-item label="职务：" prop="contactDuty">
        <el-input v-model="contactForm.contactDuty" style="width:150px" ></el-input>
      </el-form-item>
      <el-form-item label="关注点：">
        <el-input v-model="contactForm.contactFocus" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" :rows="2" ></el-input>
      </el-form-item>
      <el-form-item label="设为主联系人：">
        <el-radio-group v-model="contactForm.isMainContact" >
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否有采购决定权：">
        <el-radio-group v-model="contactForm.isBuyPermission" >
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div style="margin:20px 0;font-weight: bold;cursor: pointer" @click="isShowMore = !isShowMore">更多信息 <i :class="{'el-icon-caret-bottom':!isShowMore,'el-icon-caret-top':isShowMore}"></i></div>
      <div v-if="isShowMore">
        <el-form-item label="邮件：">
          <el-input v-model="contactForm.contactEmail" style="width:150px" ></el-input>
        </el-form-item>
        <el-form-item label="地址：">
          <el-input v-model="contactForm.contactAddress" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio-group v-model="contactForm.contactSex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期：" prop="trackingTime">
          <el-date-picker
            v-model="contactForm.contactBirthday"
            align="right"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="爱好：">
          <el-input v-model="contactForm.contactHobby" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="contactForm.remark" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" :rows="2"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer" >
        <el-button @click="handleClose3">取 消</el-button>
        <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {addContact,editContactInfo,checkContactMobile} from '@/api/partner'
import {validatePhone} from '@/utils/validate';
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'
import {developGoodsLineList} from '@/api/company'



const defaultContactForm = {
  customerId:'',
  customerName:'',
  contactName:'',
  contactMobile:'',
  contactDuty:'',
  contactHobby:'',
  contactFocus:'',
  contactAddress:'',
  contactSex:'',
  contactEmail:'',
  contactBirthday:null,
  isMainContact:'',
  remark:'',
  isBuyPermission:'',
  contactPhone:'',
  goodsLineId:'',
};
export default {
  name: "index",
  data(){
    return {
      dialogVisible3:false,
      isShowMore:true,
      title3:'',
      btnLoading3:false,
      contactForm:JSON.parse(JSON.stringify(defaultContactForm)),
      rules3:{
        contactName:[{required: true, message: '请填写联系人姓名', trigger: 'blur'},],
        contactDuty:[{required: true, message: '请填写联系人职务', trigger: 'blur'},],
        goodsLineId:[{required: true, message: '请选择产品线', trigger: 'change'},],
      },
      popType:'',
      // goodsLineList:[]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {

  },
  created() {

  },
  filters: {

  },
  methods:{

    //查询手机号是否存在
    seachRepeat(){
      if(validatePhone(this.contactForm.contactMobile) && this.contactForm.customerId != ''){
        checkContactMobile({contactMobile:this.contactForm.contactMobile,customerId:this.contactForm.customerId}).then((res)=>{
        }).catch((rej)=>{
          if (rej.code == 10000 || rej.code == 10001) {
            this.$message.error(rej.msg);
            this.contactForm.contactMobile = '';
          }
        })
      }
    },

    //显示联系人弹窗
    showContact(type,item){
        // console.log("item",item)
        this.isShowMore = true;
        this.dialogVisible3 = true;
        this.popType = type;
        this.contactForm = JSON.parse(JSON.stringify(defaultContactForm));
        this.contactForm.customerId = item.customerId;
        this.contactForm.customerName = item.customerName;
        if(type == 'hasCglid'){
          this.contactForm.cglId = item.cglId
        }else if(type == 'add'){
          this.contactForm.goodsLineId = item.goodsLineId ? item.goodsLineId : '';
          // this.getList();
        }else if(type == 'edit' || type == 'copy'){
          this.contactForm = JSON.parse(JSON.stringify(item));
          // this.getList();
        }
    },

    //获取产品线列表
    // getList() {
    //   developGoodsLineList({customerId:this.contactForm.customerId,tab:'isMyCharge'}).then(response => {
    //     this.goodsLineList = response;
    //   })
    // },

    //关闭联系人弹窗
    handleClose3(){
      this.$refs.contactForm.clearValidate();
      this.dialogVisible3 = false;
      this.btnLoading3 = false;
    },

    //提交联系人
    handleConfirm3(){
      this.$refs.contactForm.validate((valid) => {
        if (valid) {
          if(this.contactForm.contactMobile == '' && this.contactForm.contactPhone == ''){
            this.$message.error('联系人手机与电话必需填一项');
            return false
          }
          this.btnLoading3 = true;
          let data = JSON.parse(JSON.stringify(this.contactForm));
          let fn = addContact
          if(this.popType == 'edit'){
            fn = editContactInfo
          }
          fn(data).then((res)=>{
            this.btnLoading3 = false;
            this.handleClose3();
            this.$emit('getList')
          }).catch(()=>{
            this.btnLoading3 = false;
          })
        }
      })
    },
  },
}
</script>

<style  lang="scss">

</style>
